<template>
  <div class='bottom_dialog' v-if="dialog" @click="closeDia($event)">
    <div class='bottom_box' ref="box">
      <div class='bottom_title'>
        <span>支付金额：</span>
        <span>￥{{currentPrice.toFixed(2)}}</span>
      </div>
      <div class="bottom_main">
        <div class="bottom_list" v-for="(item,index) in payList" :key="index" @click="selePay(index)">
          <img :src="item.url" class="bottom_img">
          <span class="bottom_text">{{item.text}}</span>
          <img :src="item.sel" v-if="payIndex==index" class="bottom_icon">
          <img :src="item.icon" v-else class="bottom_icon">
        </div>
      </div>
      <div class='pay_btn' @click="payBtn">立即支付</div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { wxPayAPI, isPayCoursementAPI, resourcePayAPI } from '@/api/order.js'

export default {
  props: {
    dialog: {
      default: false,
      type: Boolean
    },
    currentPrice: {
      type: Number,
      default: null
    },
    currentId: {
      type: Number,
      default: null
    },
    payType: {
      type: Boolean,
      default: false
    },
    orderCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      payIndex: 0,
      payList:[
        // {url:require('@/assets/member/icon_zhifubao.png'),text:'支付宝',icon:require('@/assets/member/icon_nol.png'),sel:require('@/assets/member/icon_sel.png')},
        {url:require('@/assets/member/icon_wx.png'),text:'微信',icon:require('@/assets/member/icon_nol.png'),sel:require('@/assets/member/icon_sel.png')},
      ]
    }
  },
  methods: {
    closeDia(ev) { //点击关闭弹窗
      if(!this.$refs.box.contains(ev.target)) {
        this.$emit('setDialog',false)
      }
    },
    selePay(index) { //选择支付方式
      this.payIndex = index
    },
    isPay() {//判断支付
      let that = this
      isPayCoursementAPI({oid: localStorage.getItem('memberId')}).then(orderStuas => {
        if(orderStuas.data.data == 1){//支付成功
          Toast('支付成功');
          this.$emit('getDet')
        } else{
          setTimeout(() =>{
            that.isPay()
          },3000)
        }
      })
    },
    payBtn() { //立即支付
      let that = this
      if(this.isLogin()){
        if(this.payType) { //资源支付
          let obj = {
            orderCode: this.orderCode,
            payType: this.payIndex + 1,
            source: ''
          }
          if (/MicroMessenger/.test(window.navigator.userAgent)) {//微信浏览器//调起微信支付
            obj.source = 3
            obj.openId = localStorage.getItem('openId')
            resourcePayAPI(obj).then(res =>{
              console.log(res,'resourcePay')
              if (res.data.code == 0) {
                const resData = JSON.parse(res.data.data.url)
                localStorage.setItem("memberId",res.data.data.orderId)
                WeixinJSBridge.invoke(
                  'getBrandWCPayRequest', {
                    "appId": resData.appId,     //公众号名称，由商户传入     
                    "timeStamp": resData.timeStamp,         //时间戳，自1970年以来的秒数     
                    "nonceStr": resData.nonceStr, //随机串     
                    "package": 'prepay_id=' + resData.package,     
                    "signType":resData.signType,         //微信签名方式：     
                    "paySign":resData.paySign //微信签名 
                  },
                  (res) => {
                  if(res.err_msg == "get_brand_wcpay_request:ok"){
                    that.isPay() //判断是否支付
                  } else{
                    Toast('支付失败，请稍后再试');
                  } 
                });
              } else{
                  Toast(res.data.msg)
              }
            })
          } else { //其他浏览器
            obj.source = 4
            resourcePayAPI(obj).then(res =>{
              if (res.data.code == 0) {
                localStorage.setItem("memberId",res.data.data.orderId)
                //跳转回页面
                let data = '&redirect_url=http://192.168.2.247/wap/demo.html?pageName=/member'
                // 微信app的微信支付
                window.location.href = res.data.data.url+ data
              } else{
                Toast(res.data.msg)
              }
            })
          } 
        } else { //开通会员
          let data = {
            id: this.currentId,//vip类型Id ,
            payType: this.payIndex+1, //支付类型 0支付宝 1微信,
            realPrice: this.currentPrice, //售价 ,
            source: ''
          }
          if (/MicroMessenger/.test(window.navigator.userAgent)) {//微信浏览器//调起微信支付
            data.source = 3
            data.openId = localStorage.getItem('openId')
            wxPayAPI(data).then(res =>{
              if (res.data.code == 0) {
                const resData = JSON.parse(res.data.data.url)
                localStorage.setItem("memberId",res.data.data.orderId)
                WeixinJSBridge.invoke(
                  'getBrandWCPayRequest', {
                    "appId": resData.appId,     //公众号名称，由商户传入     
                    "timeStamp": resData.timeStamp,         //时间戳，自1970年以来的秒数     
                    "nonceStr": resData.nonceStr, //随机串     
                    "package": 'prepay_id=' + resData.package,     
                    "signType":resData.signType,         //微信签名方式：     
                    "paySign":resData.paySign //微信签名 
                  },
                  (res) => {
                  if(res.err_msg == "get_brand_wcpay_request:ok"){
                    that.isPay() //判断是否支付
                  } else{
                    Toast('支付失败，请稍后再试');
                  } 
                });
              } else{
                  Toast(res.data.msg)
              }
            })
          } else { //其他浏览器
            data.source = 4
            wxPayAPI(data).then(res =>{
              if (res.data.code == 0) {
                localStorage.setItem("memberId",res.data.data.orderId)
                //跳转回页面
                let data = '&redirect_url=http://192.168.2.247/wap/demo.html?pageName=/member'
                // 微信app的微信支付
                window.location.href = res.data.data.url+ data
              } else{
                Toast(res.data.msg)
              }
            })
          } 
        }
      }
    },
  },
}
</script>

<style scoped>
  /* 支付弹窗 */
  .bottom_dialog{
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.5);
    z-index: 3000;
  }
  .bottom_box{
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    overflow: hidden;
    padding-bottom: 0.38rem;
    width: 100%;
    border-radius: 0.3rem 0.3rem 0 0;
  }
  .bottom_title{
    font-size: 16px;
    font-weight:bold;
    color: #000;
    height: 1.02rem;
    line-height: 1.02rem;
    padding: 0 0.51rem;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: 1px solid #EBEBEB;
  }
  .bottom_title span {
    font-weight: normal;
    color: #333333;
    font-size: 15px;
  }
  .bottom_title span:last-child {
    float: right;
    font-weight: bold;
  }
  .bottom_main {
    padding: 0 0.24rem;
    box-sizing: border-box;
  }
  .bottom_list {
    height: 1.2rem;
    line-height: 1.2rem;
    border-bottom: 1px solid #EBEBEB;
    padding: 0 0.27rem;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center; /*垂直居中*/
  }
  .bottom_img {
    width: 0.42rem;
    height: 0.42rem;
    vertical-align: middle;
    align-items: center;
  }
  .bottom_text {
    flex: 1;
    color: #333333;
    font-size: 14px;
    margin-left: 0.18rem;
  }
  .bottom_icon {
    width: 0.4rem;
    height: 0.4rem;
    /* float: right; */
    vertical-align: middle;
    align-items: center;
  }
  .pay_btn{
    height: 0.8rem;
    line-height: 0.8rem;
    margin: 0.3rem 0.31rem 0;
    font-size: 16px;
    color: #fff;
    text-align: center;
    background: linear-gradient(78deg, #FD8666, #FB584D);
    border-radius: 0.09rem;
  }
</style>